<!DOCTYPE html>
<html>
<!--
author:guojunyu
desc:this demo is about blog. PLEASE NOTE:If you have trouble running it ,try any of the other demos or connect with auther.
A ny individuals and organizations and not for commercial use, professiona website for customized web site.
-->
<head>
		<meta charset="utf-8">
		<link href="/static/css/login_reglogin.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
		<div class="bg">
				<img src="/static/images/c.jpg" alt="">
			</div>

	<div id='test'></div>

	<div class="main">
		<div class="header" >
			<h1>创建一个新账户！</h1>
		</div>
		<p></p>
				<ul class="left-form">
					<h2>新账户:</h2>
					<li>
            <input type="text" class="username" name="username" placeholder="请输入用户名" required maxlength="11"/>
						<div class="clear"> </div>
					</li> 
					<li>
            <input type="email" class="email" name="email" placeholder="请输入邮箱" required />
						<div class="clear"> </div>
					</li> 

					<li>
            <input type="phone" class="phone" name="phone" placeholder="请输手机号" required/>
						 <input type="button" id="sms" onclick="sendSMS();settime(this)" value="免费获取验证码">
						<div class="clear"> </div>
					</li> 
					<li>
            <input type="sms_num" class="sms_num" name="sms_num" placeholder="请输入验证码" required />
						<div class="clear"> </div>

			<li>
            <input type="password" class="password_1" name="password_1" placeholder="请输入密码" required minlength="6" maxlength="11"/>
						<div class="clear"> </div>
            </li>
            <li>
              <input type="password" class="password_2" name="password_2" placeholder="请再次确认密码" required minlength="6" maxlength="11"/>
              <div class="clear"> </div>
            </li>
            <li style="border:none">
				<input type="button" value="创建并登录" onclick="regist()">
            </li>
				</ul>
				<div class="clear"> </div>
	</div>
</body>


    <script>
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
            }
            return null;
        }


	var countdown=60;

	function settime(obj) {
    	if (countdown == 0) {
        	obj.removeAttribute("disabled");
        	obj.value="免费获取验证码";
			countdown = 60;
        	return;
    	} else {
        	obj.setAttribute("disabled", true);
        	obj.value="重新发送(" + countdown + ")";
        	countdown--;
    	}
		setTimeout(function() {
    		settime(obj) }
    	,1000)
	}

	function regist() {
		var username = $('.username').val();
		var email = $('.email').val();
		var password_1 = $('.password_1').val();
		var password_2 = $('.password_2').val();
		var phone = $('.phone').val();
		var sms_num = $('.sms_num').val();
		var post_data = {"username":username, "email":email,"password_1":password_1,
			"password_2":password_2,"phone":phone,"sms_num":sms_num};


		$.ajax({

			type: "post",
			contentType: "application/json",
			dataType: "json",
			data: JSON.stringify(post_data),
			url: "http://127.0.0.1:8000/v1/users",
			success: function (result){
				if (result.code == 200){
					window.localStorage.setItem('dnblog_token', result.data.token);
					window.localStorage.setItem('dnblog_user', result.username);
					alert("注册成功")
					window.location.href = '/' + 'login'
				}else{
					alert(result.error)
				}
			}
		})
	}

	function sendSMS(){

		var phone = $ ('.phone').val();
		var post_data = {"phone":phone}
		$. ajax({
			type: "post",
			contentType: "application/json",
			dataType: "json",
			url:"http://127.0.0.1:8000/v1/users/sms",
			data: JSON.stringify(post_data),
			success:function (result){
				if (result.code == 200){
					alert("短信已发送，请注意查收");
				}else{
					alert(result.error)
				}
			}
		})

	}


    </script>


</html>
